<template>
    <!-- 组件的结构 -->
<div >
    <div v-text="msg"></div>
    <h2 @click="showName">学生姓名：{{name}}</h2>
    <h2>学生年龄：{{myAge}}</h2>
    <button @click="updataAge">点我年龄++</button>
    <h2>学生性别：{{sex}}</h2>
 </div>
</template>

<script >
//引入一个混合
import {mixin} from '../mixin'
// 组件交互相关的代码（数据、方法等）
export default{
    name:'StudentName',/*vue/multi-word-component-names 在这个上面出了问题 */
    data(){
        return{
        msg:'真的是服了',
        myAge:this.age
        }
    },
    mixins:[mixin],
    methods:{
        updataAge(){
            this.myAge++
        }
    },
    props:['name','age','sex']  //简单接收
    // 接收的同时对数据进行类型限制
   /*  props:{
        name:String,
        age:Number,
        sex:String
    } */
    // 接收的同时对数据进行类型限制+默认值的指定+必要性的限制（最完整的写法）
   /*  props:{
        name:{
            type:String,//name的类型是字符串
            required:true,//name是必要的
        },
        age:{
            type:Number,
            default:99//默认值
        },
        sex:{
            type:String,
            required:true
        }
    } */
};
</script>
